<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .mirror {
            width: 1200px;
            margin: 50px auto;
            position: relative;
            display: flex;
            justify-content: space-between;
        }

        .left {
            width: 300px;
            background-color: #ddd;
        }

        .left1 {
            width: 300px;
            height: 300px;
        }

        .left img {
            width: 300px;
            height: 300px;
        }

        .left2 ul {
            display: flex;
        }

        .left2 img {
            width: 80px;
            height: 80px;
            margin: 10px;
        }

        .cover {
            width: 150px;
            height: 150px;
            background-color: rgba(0, 0, 0, 0.5);
            position: absolute;
            top: 0;
            cursor: move;

            opacity: 0;
        }

        .right {
            width: 600px;
            height: 600px;
            background-color: #eee;
            overflow: hidden;
            position: relative;
        }

        .right img {
            width: 1200px;
            height: 1200px;
            position: absolute;
        }
    </style>
</head>

<body>


    <div class="mirror">
        <div class="left">
            <div class="left1">
                <img src="https://img12.360buyimg.com/babel/s320x320_jfs/t1/137619/12/32941/122494/647dd368F072a2e76/3f5a4eabf2ad17f7.jpg!cc_320x320.webp"
                    alt="">
                <div class="cover"></div>
            </div>
            <div class="left2">
                <ul>
                    <li>
                        <img src="https://img12.360buyimg.com/babel/s320x320_jfs/t1/137619/12/32941/122494/647dd368F072a2e76/3f5a4eabf2ad17f7.jpg!cc_320x320.webp"
                            alt="">
                    </li>
                    <li>
                        <img src="https://img30.360buyimg.com/babel/s320x320_jfs/t1/94502/12/36303/230353/647fd907F88325187/ff9392b50f0dcc9a.jpg!cc_320x320.webp"
                            alt="">
                    </li>
                    <li>
                        <img src="https://img13.360buyimg.com/babel/s320x320_jfs/t1/87600/15/24641/165041/64771009F8140fa0f/45f7fba670163108.jpg!cc_320x320.webp"
                            alt="">
                    </li>
                </ul>
            </div>
        </div>
        <div class="right">
            <img src="https://img12.360buyimg.com/babel/s320x320_jfs/t1/137619/12/32941/122494/647dd368F072a2e76/3f5a4eabf2ad17f7.jpg!cc_320x320.webp"
                alt="">
        </div>
    </div>



    <script src="../js/mirror.js"></script>
    <script>

        const smallImg = ['1.jpg', '2.jpg', '3.jpg'];
        const bigImg = ['a.jpg', 'b.jpg', 'c.jpg'];

        // 放大镜
        //     左边和右边的比例必须一致


        // 显示隐藏  cover

        class Mirror2 extends Mirror {
            constructor(el) {
                super(el);

                this.oImgs = this.oBox.querySelectorAll('.left2 img');
                // console.log(this.oImgs);

                this.clickEvent()
            }

            // 点击切换
            clickEvent() {
                const _this = this;
                for (let i = 0; i < this.oImgs.length; i++) {
                    this.oImgs[i].onclick = function () {
                        _this.oLeftImg.src = this.src;
                        _this.oRightImg.src = this.src;
                        // _this.oLeftImg.src = bigImg[i];
                    }
                }
            }
        }


        new Mirror2('.mirror');

    </script>

</body>

</html>